﻿@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_AdminLayout.cshtml";
}
@section styles{
    <style type="text/css">
        .el-select {
            width: 100%;
        }
    </style>
}

<div id="app">
    <div class="box box-primary">
        <div class="box-header">
            <ol class="breadcrumb" style="padding:0px;margin:1px;">
                <li><a href="/SaleOrder/SearchIndex"><i class="fa fa-dashboard"></i>零售综合查询</a></li>
            </ol>
        </div>
        <div class="box-body">
            <el-row v-bind:gutter="20">
                <el-col v-bind:span="4">
                    <el-input v-model="table.args.OrderCode" placeholder="零售单号" clearable></el-input>
                </el-col>
                <el-col v-bind:span="4">
                    <product-selector v-model="table.args.productIds" placeholder="商品" ref="producttable"></product-selector>
                </el-col>
                <el-col v-bind:span="4">
                    <el-input v-model="table.args.snCode" placeholder="输入串码" clearable></el-input>
                </el-col>
                <el-col v-bind:span="4">
                    <store-selector v-model="table.args.storeId" placeholder="门店"></store-selector>
                </el-col>
                <el-col v-bind:span="4">
                    <brand-selector v-model="table.args.brandIds" placeholder="品牌" ref="brandtable"></brand-selector>
                </el-col>
                <el-col v-bind:span="4">
                    <category-selector v-model="table.args.categoryId" v-on:value-changed="onSelectCategory" placeholder="品类"></category-selector>
                </el-col>
            </el-row>
            <el-row v-bind:gutter="20" class="row-bottom">
                <el-col v-bind:span="4">
                    <el-input v-model="table.args.fjCode" placeholder="富基单号" clearable></el-input>
                </el-col>
                <el-col v-bind:span="4">
                    <el-input v-model="table.args.sapCode" placeholder="SAP单号" clearable></el-input>
                </el-col>
                <el-col v-bind:span="4">
                    <el-select v-model="table.args.orderType" placeholder="单据类型" v-on:change="onOrderTypeChanged" clearable>
                        <el-option v-for="item in orderTypeOptions"
                                   v-bind:key="item.Key"
                                   v-bind:label="item.Value"
                                   v-bind:value="item.Key">
                        </el-option>
                    </el-select>
                </el-col>
                <el-col v-bind:span="4">
                    <el-select v-model="table.args.Status" placeholder="订单状态" v-if="table.args.orderType==1" clearable>
                        <el-option v-for="item in orderStatusOptions"
                                   v-bind:key="item.Key"
                                   v-bind:label="item.Value"
                                   v-bind:value="item.Key">
                    </el-select>
                    <el-select v-model="table.args.RoStatus" placeholder="退单状态" v-if="table.args.orderType==2" clearable>
                        <el-option v-for="item in orderRoStatusOptions"
                                   v-bind:key="item.Key"
                                   v-bind:label="item.Value"
                                   v-bind:value="item.Key">
                        </el-option>
                    </el-select>
                </el-col>
                <el-col v-bind:span="4">
                    <el-date-picker v-model="table.args.time" value-format="yyyy-MM-dd" type="daterange" range-separator="—" start-placeholder="制单日期起" end-placeholder="制单日期止">
                    </el-date-picker>
                </el-col>
                <el-col v-bind:span="4">
                    <el-select v-model="table.args.IsPushSap" placeholder="推SAP" clearable>
                        <el-option key="0" label="未推送" value="false"></el-option>
                        <el-option key="1" label="成功" value="true"></el-option>
                    </el-select>
                </el-col>
                <el-col v-bind:span="4">
                    <el-date-picker v-model="table.args.saleTime" value-format="yyyy-MM-dd" type="daterange" range-separator="—" start-placeholder="销售日期起" end-placeholder="销售日期止">
                    </el-date-picker>
                </el-col>
            </el-row>
            <el-row class="row-bottom">
                <el-col v-bind:sm="12" v-bind:md="12">
                    <span class="input-group-btn">
                        <el-button type="primary" class="btn btn-flat" v-on:click="loadData(1)" v-bind:disabled="queryLocker">查 询</el-button>
                        <el-button type="success" class="btn btn-flat" v-on:click="exportExcel" v-bind:disabled="queryLocker">导出</el-button>
                        <el-button class="btn btn-flat" v-on:click="clearQuery"><i class="fa fa-eraser"></i>清除条件</el-button>
                    </span>
                </el-col>
            </el-row>
            <el-row>
                <el-col v-bind:span="24">
                    <el-table v-on:cell-click="cellClick" class="form-group" ref="$table" v-bind:data="table.rows" v-bind:height="table.height" border v-on:selection-change="selsChange" v-bind:empty-text="table.emptyText" highlight-current-row @*show-summary v-bind:summary-method="getSummaries"*@>
                        <el-table-column type="selection" width="55"></el-table-column>
                        <el-table-column type="index"></el-table-column>
                        <el-table-column label="操作" width="50">
                            <template slot-scope="scope">
                                <subpage-dialog type="text" text="详情" title="销售单详情" v-bind:buttons="[{ buttonId: 'cancel', text: '取消' , autolock: false }]" v-bind:url="'/SaleOrder/ShowDetail?code='+scope.row.Code"></subpage-dialog>
                            </template>
                        </el-table-column>
                        <el-table-column prop="Code" label="单号" width="100"></el-table-column>
                        <el-table-column prop="StoreName" label="销售门店" width="200"></el-table-column>
                        <el-table-column prop="CreatedOnTime" label="制单时间" width="95"></el-table-column>
                        <el-table-column prop="PaidDateTime" label="销售时间" width="95"></el-table-column>
                        <el-table-column prop="ProductCode" label="商品编码" width="120"></el-table-column>
                        <el-table-column prop="ProductName" label="商品名称" width="200"></el-table-column>
                        <el-table-column prop="RealPrice" label="售价" width="60"></el-table-column>
                        <el-table-column prop="Quantity" label="数量" width="50"></el-table-column>
                        <el-table-column prop="Amount" label="金额" width="60"></el-table-column>
                        <el-table-column prop="SNCode" label="串码" width="150"></el-table-column>
                        <el-table-column prop="FJCode" label="富基单号" width="100"></el-table-column>
                        <el-table-column prop="SapCode" label="SAP单号" width="100"></el-table-column>
                        <el-table-column prop="BrandName" label="品牌" width="80"></el-table-column>
                        <el-table-column prop="CategoryName" label="品类" width="200"></el-table-column>
                        <el-table-column prop="Specification" label="规格" width="180"></el-table-column>
                        <el-table-column prop="CreatedByName" label="制单人" width="100"></el-table-column>
                        <el-table-column prop="StatusName" label="审核状态" width="80"></el-table-column>
                        <el-table-column prop="PushSap" label="推SAP" width="80">
                            <template slot-scope="scope">
                                <el-tag v-bind:type="scope.row.IsPushSap ? 'success' : 'danger'"
                                        disable-transitions>{{scope.row.PushSap}}</el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column prop="Remark" label="备注" width="200"></el-table-column>

                    </el-table>
                    <el-pagination v-bind:current-page="table.page.pageIndex" v-bind:page-size="table.page.pageSize" v-bind:total="table.page.total"
                                   layout="total,sizes,prev,pager,next,jumper" @*v-bind:page-sizes="table.args.pageSize"*@
                                   v-on:size-change="onPageSizeChange" v-on:current-change="onPageChange" background>

                    </el-pagination>
                </el-col>
            </el-row>
        </div>
        <!-- /.box-body -->
    </div>
    <div class="clearfix"></div>
</div>
@section scripts{
    <script src="~/Content/vue/plugins/subpage-dialog/subpage-dialog.js"></script>
    <script src="~/Content/vue/plugins/brand-selector/brand-selector.js" type="text/javascript"></script>
    <script src="~/Content/vue/plugins/category-selector/category-selector.js" type="text/javascript"></script>
    <script src="~/Content/vue/plugins/store-selector/store-selector.js" type="text/javascript"></script>
    <script src="~/Content/vue/plugins/product-selector/product-selector.js" type="text/javascript"></script>
    <script>
        // bootstrap the demo
        var demo = new Vue({
            components: {
            },
            el: '#app',
            data: {
                queryLocker: false,
                table: {
                    emptyText: "暂无数据",
                    height: 450,
                    rows: [],
                    args: {
                        ProductName: '', ProductCod: '', OrderCode: '', Status: '', RoStatus: '', storeId: '', brandIds: '', categoryId: '',
                        categoryCode: '', productIds: '', snCode: '', orderType: '', createOnFrom: '', createOnTo: '', time: '', saleTime:'', saleTimeFrom:'',saleTimeTo:'',fjCode:'',sapCode:'',IsPushSap:null
                    },
                    page: { total: 0, pageIndex: 1, pageSize: global_config.page.pageSize, isPaging: true }
                },
                orderTypeOptions:@Html.Raw(ViewBag.OrderType),
                orderStatusOptions:@Html.Raw(ViewBag.OrderStatus),
                orderRoStatusOptions:@Html.Raw(ViewBag.OrderRoStatus)
                },
            methods: {
                cellClick: function (row, column, cell, event) {

                },
                onOrderTypeChanged:function(){
                    this.table.args.Status = "";
                    this.table.args.RoStatus = "";
                },
                //获取选中的列
                selsChange: function (sels) {
                    this.sels = sels;
                },
                onPageChange: function (page) {
                    this.table.page.pageIndex = page;
                    this.loadData();
                },
                onPageSizeChange: function (pageSize) {
                    this.table.page.pageSize = pageSize;
                    this.loadData(1);
                },
                clearTable: function () {
                    this.table.rows = [];
                },
                lockQuery: function (lock) {
                    this.queryLocker = lock;
                    this.table.emptyText = lock ? "Loading..." : "暂无数据";
                },
                loadData: function (pageIndex) {
                    this.clearTable();
                    this.lockQuery(true);
                    if (pageIndex)
                        this.table.page.pageIndex = pageIndex;
                    var _self = this;
                    var url = "/SaleOrder/GetCompositeSaleOrders";
                    //设置时间
                    if (_self.table.args.time.length > 0) {
                        _self.table.args.createOnFrom = _self.table.args.time[0];
                        _self.table.args.createOnTo = _self.table.args.time[1];
                    }
                    if (_self.table.args.saleTime.length > 0) {
                        _self.table.args.saleTimeFrom = _self.table.args.saleTime[0];
                        _self.table.args.saleTimeTo = _self.table.args.saleTime[1];
                    }
                    var data = Object.assign({}, _self.table.page, _self.table.args);
                    $.get(url, data, function (result) {
                        _self.lockQuery(false);
                        if (result.success) {
                            _self.table.rows = result.data;
                            _self.table.page.total = result.total;
                        }
                        else {
                            _self.$message({
                                message: result.error,
                                type: 'error'
                            });
                        }
                    }, "Json");
                },

                exportExcel: function () {
                    this.lockQuery(true);
                    var $this = this;
                    //设置时间
                    if (this.table.args.time.length > 0) {
                        this.table.args.createOnFrom = $this.table.args.time[0];
                        this.table.args.createOnTo = $this.table.args.time[1];
                    }
                    if (this.table.args.saleTime.length > 0) {
                        this.table.args.saleTimeFrom = $this.table.args.saleTime[0];
                        this.table.args.saleTimeTo = $this.table.args.saleTime[1];
                    }
                    var data = Object.assign({}, $this.table.page, $this.table.args, { isPaging: false });
                    var href = "/SaleOrder/GetCompositeSaleOrders?toExcel=true";
                    for (var name in data) {
                        if (data[name] != null && data[name].toString() != "")
                            href += "&" + name + "=" + encodeURIComponent(data[name]);
                    }
                    window.location.href = href;
                    this.lockQuery(false);
                },

                clearQuery: function () {
                    this.table.args = {
                        ProductName: '', ProductCod: '', OrderCode: '', Status: '', storeId: '', brandIds: '', categoryId: '',
                        categoryCode: '', productIds: '', snCode: '', orderType: '', createOnFrom: '', createOnTo: '', time: '',fjCode:'',sapCode:'',IsPushSap:null
                    };
                },
                onSelectCategory: function (node) {
                    if (node.length > 0) {
                        this.table.args.categoryCode = node[0].Code;
                    }
                }
            },
            created: function () {
                setListPage(this.table, 293);
            }
        });
    </script>
}






